<template>
    <div id="now">
        <ul>
            <li v-for="item in nowPlayDate" :key="item.id">
                <div class="first">
                    <img :src="item.img" alt="">
                </div>
                <div class="second">
                    <p class="title">{{item.title}}</p>
                    <p class="font-color">
                        <span >观众评</span>
                        <span class="score">{{item.score}}</span>
                    </p>
                    <p class="actor font-color">{{item.actors}}</p>
                    <p class="font-color">{{item.nums}}</p>
                </div>
                <div class="third">
                    <button>购票</button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
	export default {
		name: 'Now',
		methods:{
			getnowPlayDate(){
				var that=this;
				axios.get('/mock/nowPlayDate.json')
				  .then(function (response) {
				    console.log(response);
					if(response.status==200){
						if(response.data && response.data.nowPlayDate){
							that.nowPlayDate=response.data.nowPlayDate;
						}
					}
				  })
				  .catch(function (error) {
				    console.log(error);
				  });
			}
		},
		created(){
			this.getnowPlayDate();
		},
		data() {
			return {
				nowPlayDate:[]
			}
		},

	}
</script>

<style scoped>
	#now{
		width: 100%;
	}
    img{
        width: 80px;
    }
    div{
        float: left;
    }
    .first{
        width: 25%;
		margin-bottom: 8px;
    }
    .second{
        width: 58%;
    }
    .third{
        width: 15%;
		text-align: center;
		line-height: 100px;
    }
    .actor{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    li{
        overflow: hidden;
        margin: 10px;
		border-bottom: 1px solid #CCCCCC;
		
    }
    .title{
        font-size: 18px;
        font-weight: 700;
    }
    p{
        line-height: 25px;
    }
    .font-color{
        color: #666;
    }
    .score{
        color: #F90;
        font-weight: 700;
        margin-left: 5px;
    }
    button{
        background-color: #E54847;
        width: 45px;
        height: 30px;
        border: none;
        text-align: center;
        line-height: 30px;
        color: white;
		border-radius: 0.3125rem;
    }
</style>
